<template>
    <div class="houseContainer">
        <div class="infolist">
          <div class="headerSelection">
            <split-vertical title="仓库信息"></split-vertical>
            <v-form :formProps="searchForm" ref="form"
                    v-on:handleReset="handleReset"
                    v-on:coverFormData="coverFormData"></v-form>
          </div>
          <div class="stand">
            <div style="line-height:50px;margin-left:10px;">
              <v-button :operationBtnArray="operationBtnArray" v-on:handleSearchTopBtn="handleSearchTopBtn"></v-button>
            </div>
            <div style="margin:0 10px;">
              <v-table :tableParams="tableParams" v-on:handleOperation="handleOperation"></v-table>
            </div>
          </div>
          <div class="block">
              <el-pagination
                  @current-change="handleCurrentChange"
                  :current-page="pageIndex"
                  :page-sizes="[10]"
                  :page-size="10"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pageCount">
              </el-pagination>
          </div>
               <!-- 弹出框组件 -->
            <house-name v-if="show" @closeDialog='closeDialog' :addinfo='addinfo'></house-name>
            <add-depot v-if='showtip' @closeDialog='closeDialog'></add-depot>
        </div>
    </div>
</template>
<script>
import VTable from "components/common/PageTable/VTable"
import addDepot from 'components/base/WarehouseInfo/AddDepot.vue'
import houseName from 'components/base/WarehouseInfo/HouseName.vue'
// import {localStorage} from 'js/localStorage'
import SplitVertical from "components/common/SplitVertical"
import VForm from "components/common/VForm"
import VButton from "components/common/VButton"

let setDepotType = {
    '1':'本地仓库',
    '2':'委外仓库'
}
export default {
    inject:['reload'],
    data(){
        return{
            searchCondition:{},
            list: [],
            pageIndex:1,
            pageSize:10,
            pageCount:null,
            //传递给弹框的数据
            addinfo:{},
            //控制弹框的显示
            showtip:false,
            show:false,
            //v-model绑定的值
            depotAddress:'',
            depotCode:'',
            depotPhone:'',
          searchForm: {
            col: 3,
            labelWidth: '100px',
            submitBtn: {
              text: '搜索'
            },
            formItemArray: [{
              label: '仓库编码',
              prop: 'depotCode',
              placeholder: "请输入",
              value: ''
            }, {
              label: '仓库地址',
              prop: 'depotAddress',
              placeholder: "请输入",
              value: ''
            }, {
              label: '负责人电话',
              placeholder: "请输入",
              prop: 'depotPhone',
              value: ''
            }],
          },
          operationBtnArray: [{
            text: '刷新',
            icon:'el-icon-refresh',
            show: true,
            type: 'primary',
            methodName: 'refresh',
          }, {
            text: '新增',
            icon:'el-icon-plus',
            show: true,
            type: 'success',
            methodName: 'add',
          }],
            tableParams:{
                dataArray:[],
                showMultiSelection:false,
                columnArray:[
                    {label: '仓库编码', prop: 'depotCode',  sortable: false,width:'100'},
                    {label: '仓库名称', prop: 'depotName',  sortable: false,width:'150'},
                    {label: '仓库地址', prop: 'depotAddress',  sortable: false},
                    {label: '仓库负责人', prop: 'depotPerson',sortable: false,width:'150'},
                    {label: '负责人电话', prop: 'depotPhone',sortable: false,width:'150'},
                    {label: '结款方式', prop: 'payType',sortable: false,width:'100'},
                    {label: '仓库类别',prop: 'depotType',sortable: false,width:'100'}
                ],
                rowHandle:{
                    view:{
                        show:false
                    }
                }
            },
        }
    },
    created(){
      this.init()
    },
    filters:{
        depotType(val){
            return val == "1" ? "本地仓库" :"委外仓库"
        }
    },
    methods:{
        init(){
           this.depotList()
        },
        handleSearchTopBtn(methodName) {
          if (methodName === "refresh") {
            this.refresh();
          } else {
            this.create();
          }
        },
        handleReset(formName) {
          this.$refs.form.resetForm(formName);
        },
        coverFormData(data) {
          this.searchCondition = data;
          this.query()
        },
        //初始化仓库
        depotList(){
            let parmas={
                pageIndex:1,
                pageSize:10,
            }
            let success=data=>{
                if(data.code=='OK'){
                    this.tableParams.dataArray = data.data
                    data.data.forEach(element => {
                        element.depotType=setDepotType[element.depotType]
                    });
                    this.pageCount= data.pageCount
                }else{
                    this.$message.error(data.msg)
                }
            }
            this.api.depotList(parmas,success)
        },
        handleOperation(rowIndex, row, methodName) {
            this.id=row.id
            if(methodName == "update"){
                this.showTip=true
                this.edit()
            }else if(methodName == "delete"){
                this.del()
            }
        },
        //刷新列表
        refresh(){
            this.depotList()
        },
        //查询
        query(){
          let param = this.searchCondition;
          if (!param.pageIndex || !param.pageSize) {
            param['pageIndex'] = this.pageIndex;
            param['pageSize'] = this.pageSize;
          }
          let success = data => {
            if (data.code === 'OK') {
              this.pageCount = data.pageCount;
              this.tableParams.dataArray=data.data
              data.data.forEach(element => {
                element.depotType=setDepotType[element.depotType]
              });
            } else {
              this.$message.error(data.msg);
            }
          };
            this.api.depotList(param,success)
        },
        //弹框
        create(){
            this.showtip=true;
        },
        //重置
        reset(){
            this.depotCode = '',
            this.depotPhone='',
            this.depotAddress=''
        },
        //编辑弹窗
        edit(){
            this.show=true;
            let parmas={
                id:this.id
            }
            let success=data=>{
                if(data.code=='OK'){
                    this.addinfo=data.data
                }else{
                    this.$message.error(data.msg)
                }
            }
            this.api.depotGetOne(parmas,success)
        },
        //关闭弹窗
        closeDialog(){
            this.showtip=false;
            this.show=false;
        },
        del(){
            this.$confirm('是否删除该消息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
            }).then(() => {
                //删除仓库信息
                let parmas={
                    id:this.id
                }
                let success=data=>{
                    if(data.code=='OK'){
                        this.reload()
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }else{
                        this.$message.error(data.msg)
                    }
                }
               this.api.depotDelete(parmas,success)
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //当前页
        handleCurrentChange(val) {
          this.searchCondition['pageIndex'] = val;
          this.query()
        },
    },
    components:{
        addDepot, houseName, VTable,VForm, VButton, SplitVertical
    }
}
</script>
<style lang="scss" scoped>
.houseContainer{
   .infolist{
     .headerSelection{
       background:#fff;
       height:140px;
       padding:0 10px;
       border-left: 2px solid #e8e8e8;
       border-right: 2px solid #e8e8e8;
       border-bottom: 2px solid #e8e8e8;
     }
      .block{
          padding:10px 0;
          text-align: right;
      }
    }
}
</style>

